<template>
  <div class="distributed">
    <el-card shadow="never">
      <el-form label-width="80px" :inline="true">
        <el-form-item label="风控日期:">
          <el-date-picker v-model="value2" style="width: 220px;" size="mini" value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="handleDateChange1" popper-class="form-data-ccc" />
        </el-form-item>


        <el-form-item label="挑战项目:">
          <el-select v-model="fromDistributed.challengeProject" size="mini" placeholder="所属阶段:">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in challenges" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="考核人:">
          <el-input v-model="fromDistributed.userName" size="mini" placeholder="请输入考核人:" />
        </el-form-item>
        <el-form-item label="交易账号:">
          <el-input v-model="fromDistributed.accountNumber" size="mini" placeholder="请输入交易账号" />
        </el-form-item>
        <el-form-item label="账号状态:">
          <el-select v-model="fromDistributed.resion" size="mini" placeholder="账号状态">
            <el-option v-for="item in control" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button style="margin-left: 20px;" type="primary" size="mini" @click="queryBtn">查询</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <!-- 表格 -->
      <el-table border :data="tableData" style="width: 100%">

        <!--        <el-table-column-->
        <!--          prop="tepy"-->
        <!--          align="center"-->
        <!--          label="账户类型"-->
        <!--        />-->
        <el-table-column prop="challengeProject" align="center" label="挑战项目">
          <template v-slot="{ row }">
            <span v-if="row.challengeProject === 0">评估</span>
            <span v-if="row.challengeProject === 1">即时</span>
            <span v-if="row.challengeProject === 2">固定</span>
            <span v-if="row.challengeProject === 3">比赛</span>
            <span v-if="row.challengeProject === 4">股票</span>
            <span v-if="row.challengeProject === 5">免费评估</span>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="pattern"-->
        <!--          align="center"-->
        <!--          label="账户模式"-->
        <!--        >-->
        <!--          <template v-slot="{row}">-->
        <!--            <div v-for="item in Account" :key="item.id">-->
        <!--              <span v-if="row.pattern === item.id">{{ item.name }}</span>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="stage" align="center" label="所属阶段">
          <template v-slot="{ row }">
            <div v-for="item in PhaseList1" :key="item.id">
              <span v-if="row.stage === item.id">{{ item.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="accountNumber" align="center" width="120px" label="交易账号">
          <template #header>
            <div class="box">
              <li>交易账号</li>
              <p>
                <span @click="sortU('account_number', 1)">
                  <svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12" height="12"
                    fill="#909399">
                    <path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z" p-id="2640"></path>
                  </svg>
                </span>
                <span @click="sortD('account_number', 2)">
                  <svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12" fill="#909399">
                    <path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
                  </svg>
                </span>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="accountMoney" align="center" label="账户规模" />
        <el-table-column prop="userbalance" align="center" width="120px" label="账户余额" />
        <el-table-column prop="username" align="center" label="考核人" width="110" />
        <el-table-column prop="emails" align="center" label="邮箱" width="180" />
        <el-table-column prop="resion" align="center" label="账号状态" width="180px">
          <template v-slot="{ row }">
            <div v-for="item in control" :key="item.id">
              <span v-if="+row.resion === item.id">{{ item.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fengkongTime" align="center" width="140px" label="风控日期">
          <template #header>
            <div class="box">
              <li>风控日期</li>
              <p>
                <span @click="sortU('fengkong_time', 1)">
                  <svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12" height="12"
                    fill="#909399">
                    <path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z" p-id="2640"></path>
                  </svg>
                </span>
                <span @click="sortD('fengkong_time', 2)">
                  <svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12" fill="#909399">
                    <path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
                  </svg>
                </span>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="assessorEmployeename" align="center" label="操作人" />
        <el-table-column prop="address" align="center" label="操作" width="200px">
          <template v-slot="{ row }">
            <el-button type="text" size="mini" @click="editBtn(row)">编辑</el-button>
            <el-button type="text" size="mini" @click="messageBtn(row.id)">{{ row.sendNote === 1 ? '未发送' : row.sendNote
              ===
              2 ? '重新发送' : '' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging :page-size="fromDistributed.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <addDistrbut ref="addDistrbut" :curr-o-b-j="currOBJ" :dialog-visible.sync="dialogVisible"
        @refresh="getDistributedLists" />
      <el-dialog title="请选择短信内容" :visible.sync="dialogVisibleMessage" width="30%">
        <el-select v-model="SMSParameters.contentText" placeholder="请选择内容" size="medium" style="width: 100%">
          <el-option style="width: 100%" v-for="(item, index) in reminder" :key="item.id" :label="item.label"
            :value="item.label">
          </el-option>
        </el-select>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancellation" size="mini">取 消</el-button>
          <el-button type="primary" @click="Confirm" size="mini">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>

  </div>
</template>

<script>
import addDistrbut from './components/addDistrbut'
import { getAccountType, getUserTagName } from '@/api/Tradingacct'
import { getDistributedList, sendSms } from '@/api/distributed'
import paging from '@/components/paging.vue'
import { control, Account, PhaseList1, AccountType, challenges } from '@/utils/index'
import { modifyTimeToEndOfDay } from "@/utils"
export default {
  name: 'VueAdminIndex',
  components: {
    paging,
    addDistrbut
  },
  data() {
    return {
      value2: [],
      dialogVisibleMessage: false, // 短信弹框
      currOBJ: {},
      fromDistributed: {
        accountNumber: null,
        page: 1,
        pageSize: 10,
        resion: null,
        challengeProject: null,
        // accountType: null,
        userName: null,
        accountSource: null,
        BeginTime: null,
        EndTime: null,
        sortField: null,  // 排序的字段
        sortOrder: null   // 排序的方向
      },
      total: 5,
      Entered1: [
        { id: 0, name: '资格评估 ' },
        { id: 1, name: '资格确认' },
        { id: 2, name: '正式合作' }
      ],
      Entered: [
        { id: 0, name: '挑战阶段' },
        { id: 1, name: '确认阶段' },
        { id: 2, name: '合作阶段' }
      ],
      reminder: [
        { id: 2, label: '达到今日损失' },
        { id: 1, label: '达到回撤损失' },
        { id: 3, label: '达到账户最大回撤' },
        { id: 4, label: '达到盈利目标' },
        { id: 5, label: '账号收回' },
        { id: 6, label: '挑战结束' },
      ],
      tableData: [
        { resion: 1 }
      ],
      dialogVisible: false,
      // AccountType: []
      SMSParameters: {
        id: null, //  当前列表的id
        contentText: null, // 短信内容
      },
    }
  },
  computed: {
    control() {
      return control
    },
    Account() {
      return Account
    },
    PhaseList1() {
      return PhaseList1
    },
    AccountType() {
      return AccountType
    },
    // 挑战项目
    challenges() {
      return challenges
    }
  },

  mounted() {
    this.getuseACCouyt()
    this.getDistributedLists()
  },
  methods: {
    // 风控日期搜索
    handleDateChange1() {
      if (this.value2 !== null) {
        this.value2[1] = modifyTimeToEndOfDay(this.value2[1])
        this.fromDistributed.BeginTime = this.value2[0]
        this.fromDistributed.EndTime = this.value2[1]
      } else {
        this.fromDistributed.BeginTime = ''
        this.fromDistributed.EndTime = ''
      }
    },
    // 列表
    async getDistributedLists() {
      const data = await getDistributedList(this.fromDistributed)
      this.tableData = data.records

      this.total = data.total
    },
    // 重置
    async getuseACCouyt() {
      const data = await getAccountType()
      this.AccountType = data
    },
    // 查询
    queryBtn() {
      clearTimeout(this.timer) // 清理上一次的定时器
      this.timer = setTimeout(() => {
        this.fromDistributed.page = 1
        this.getDistributedLists()
      }, 100)
    },
    // 编辑
    async editBtn(obj) {
      // if (!id) return
      this.currOBJ = obj
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.addDistrbut.getWithdrawInfo(obj.id)
      })
    },
    // 发送短信
    messageBtn(id) {
      this.SMSParameters.id = id
      this.dialogVisibleMessage = true
      // this.$message.success('发送成功')
    },
    // 后期要改
    handleSizeChange(val) {
      this.fromDistributed.pageSize = val
      this.getDistributedLists()
      // 处理分页大小改变的逻辑
    },
    handleCurrentChange(val) {
      this.fromDistributed.page = val
      this.getDistributedLists()
      // 处理当前页码改变的逻辑
    },

    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 确认发送短信
     * @date 2024/3/12
     */
    async Confirm() {
      // this.SMSParameters.id = this.Id
      // this.SMSParameters.contentText = this.contentText
      await sendSms(this.SMSParameters)
      this.$message.success('短信发送成功')
      this.dialogVisibleMessage = false
      this.getuseACCouyt()
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 取消发送短信
     * @date 2024/3/12
     */
    cancellation() {
      this.$message.warning('已取消发送')
      this.dialogVisibleMessage = false
    },
    // 升序  
    sortU(item, type) {
      this.fromDistributed.sortField = item
      this.fromDistributed.sortOrder = type
      this.getDistributedLists()
    },
    // 降序
    sortD(item, type) {
      this.fromDistributed.sortField = item
      this.fromDistributed.sortOrder = type
      this.getDistributedLists()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input--medium .el-input__inner {
  width: 100%;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;

  li {
    list-style: none;
  }

  p {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    padding: 0;
    height: 23px;

    span {
      height: 8px;
      display: flex;
    }
  }
}

@media (max-width:768px) {

  .el-form-item {
    display: flex;


  }
}
</style>
